<template>
  <div class="dashboard-editor-container">
    <!--    <img style="opacity: 0;position: absolute;top: 0;left: 0;" usemap="#commodities" src="@/assets/test/test02.svg"/>-->
    <img-mark :canvas-image="canvasImage" v-if="imgMarkShow"></img-mark>


    <map name="commodities">
      <!--      <area shape="rect" coords="0,0,128,106" href="https://ligang.blog.csdn.net/?name=mango" target="_blank" alt="芒果"/>-->
      <!--      <area shape="rect" coords="128,0,256,106" href="https://ligang.blog.csdn.net/?name=celery" target="_blank" alt="芹菜"/>-->
      <!--      <area shape="rect" coords="256,0,386,106" href="https://ligang.blog.csdn.net/?name=lemon" target="_blank" alt="柠檬"/>-->

      <!--      <area shape="rect" coords="0,106,128,212" href="https://ligang.blog.csdn.net/?name=sweetpotato" target="_blank" alt="红薯"/>-->
      <!--      <area shape="rect" coords="128,106,256,212" href="https://ligang.blog.csdn.net/?name=cherry" target="_blank" alt="车厘子"/>-->
      <!--      <area shape="rect" coords="256,106,386,212" href="https://ligang.blog.csdn.net/?name=corn" target="_blank" alt="玉米"/>-->

      <!--      <area shape="rect" coords="0,212,128,318" href="https://ligang.blog.csdn.net/?name=crab" target="_blank" alt="螃蟹"/>-->
      <!--      <area shape="rect" coords="128,212,256,318" href="https://ligang.blog.csdn.net/?name=pork" target="_blank" alt="猪肉"/>-->
      <!--      <area shape="rect" coords="256,212,256,318" href="https://ligang.blog.csdn.net/?name=pickledcabbage" target="_blank" alt="酸菜"/>-->
      <span v-for="area in areaList">
        <area :shape="area.rect" :coords="area.coords" :href="area.href" :target="area.target" :alt="area.alt"/>
      </span>
    </map>
  </div>
</template>

<script>

import ImgMark from '@/components/ImgMark/ImgMark'

export default {
  name: 'Index',
  components: { ImgMark },
  data() {
    return {
      canvasImage: 'https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000',
      imgMarkShow: true,
      areaList: [
        { shape: 'rect', coords: '0,0,128,106', href: 'https://ligang.blog.csdn.net/?name=mango', target: '_blank', alt: '芒果' },
        { shape: 'rect', coords: '128,0,256,106', href: 'https://ligang.blog.csdn.net/?name=celery', target: '_blank', alt: '芹菜' },
        { shape: 'rect', coords: '256,0,386,106', href: 'https://ligang.blog.csdn.net/?name=lemon', target: '_blank', alt: '柠檬' },
        { shape: 'rect', coords: '0,106,128,212', href: 'https://ligang.blog.csdn.net/?name=sweetpotato', target: '_blank', alt: '红薯' },
        { shape: 'rect', coords: '128,106,256,212', href: 'https://ligang.blog.csdn.net/?name=cherry', target: '_blank', alt: '车厘子' },
        { shape: 'rect', coords: '256,106,386,212', href: 'https://ligang.blog.csdn.net/?name=corn', target: '_blank', alt: '玉米' },
        { shape: 'rect', coords: '0,212,128,318', href: 'https://ligang.blog.csdn.net/?name=crab', target: '_blank', alt: '螃蟹' },
        { shape: 'rect', coords: '128,212,256,318', href: 'https://ligang.blog.csdn.net/?name=pork', target: '_blank', alt: '猪肉' },
        { shape: 'rect', coords: '256,212,256,318', href: 'https://ligang.blog.csdn.net/?name=pickledcabbage', target: '_blank', alt: '酸菜' }
      ]
    }
  },
  mounted() {
    let isMobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
    if (isMobile) {
      this.isShow = false//手机端
      alert('当前项目暂未适配移动端，请在pc端打开！')
    } else {
      this.image = '@/assets/images/dark.svg'
      this.isShow = true//非手机端
    }
  },
  methods: {}
}
</script>
